<template>
	<view class="container">
		<view v-show="cartData.length" class="cart-box" v-for="(item,index) in cartData" :key="item.id">
			<view class="check-box">
				<u-checkbox-group v-model="item.current_check" placement="column">
					<u-checkbox :checked="item.attrStatus" shape="circle" activeColor="red" @change="choose(item)">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="goods-img" @click="handleCheckDetail(item.product_id)">
				<image :src="item.productInfo.image" mode=""></image>
			</view>
			<view class="right-content">
				<view class="top">
					<view class="title">{{item.productInfo.store_name}}</view>
					<u-icon name="close"></u-icon>
				</view>
				<view class="specs">{{item.productInfo.attrInfo.suk}}</view>
				<view class="count">
					<view class="price">￥{{item.truePrice}}</view>
					<u-number-box v-model="item.cart_num" v-if="item.productInfo.limit_num"
						:max="item.productInfo.limit_num" @change="handleCartNum(item.id,$event)"></u-number-box>
					<u-number-box v-model="item.cart_num" v-else @change="handleCartNum(item.id,$event)"></u-number-box>
				</view>
			</view>
		</view>
		<view v-show="!cartData.length" style="background-color: #ffffff;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<!-- 底部结算 -->
		<view class="settlement">
			<view class="left-content">
				<view class="selectAll">
					<u-checkbox-group placement="column">
						<u-checkbox :checked="isAllChecked" shape="circle" activeColor="red" @change="allChoose">
						</u-checkbox>
					</u-checkbox-group>
					<view class="title">全选</view>
				</view>
				<view class="price">￥{{check_total}}</view>
			</view>
			<view class="right-content" v-show="!billing">结算</view>
			<view class="selected" v-show="billing" @click="handleSettleMent">结算</view>
		</view>
	</view>
</template>

<script>
	import { cart, product } from '../../api';
	export default {
		onLoad() {
			this.getCartList();
			this.getCartCount();
			this.getRecommend();
		},
		data() {
			return {
				cartData: [],
				cartCount: {},
				recommmend: [],
				num: 1,
				isAllChecked: true,
				billing: false,
				cartId: '',
			}
		},
		computed: {
			// 价格
			check_total() {
				return this.cartData.reduce((result, item) => {
					if (item.attrStatus) {
						return result += parseFloat(item.truePrice * item.cart_num);
					} else {
						return result
					}
				}, 0)
			},
		},
		methods: {
			// 获取购物车列表
			async getCartList() {
				let { status, msg, data } = await cart.cart_list();
				if (status === 200) {
					this.cartData = data.valid;
					this.billing = this.cartData.some(item => item.attrStatus === true);
				}
			},
			// 购物车数量
			async getCartCount() {
				let { status, msg, data } = await cart.cart_count();
				if (status === 200) {
					this.cartCount = data;
				}
			},
			// 为你推荐
			async getRecommend() {
				let { status, msg, data } = await product.goods_hot();
				if (status === 200) {
					this.recommmend = data;
				}
			},
			// 修改产品数量
			async handleCartNum(id, number) {
				let { status, msg, data } = await cart.cart_num({ id, number: number.value });
				if (status === 200) {
					this.getCartCount();
				} else {
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'none'
					})
				}
			},
			// 查看详情
			handleCheckDetail(id) {
				uni.setStorageSync("goods_id", id);
				uni.navigateTo({
					url: '/pages/goods_detail/goods_detail',
				})
			},
			// 反选
			choose(item) {
				//先进行取反,改变当前数据的checked状态
				item.attrStatus = !item.attrStatus;
				// 是否全部选中
				let allSelected = this.cartData.every(item => item.attrStatus === true);
				if (allSelected) {
					this.isAllChecked = true;
				} else {
					this.isAllChecked = false;
				}
				let single = this.cartData.every(item => item.attrStatus === false);
				if (single) {
					this.billing = false;
				} else {
					this.billing = true;
				}
			},
			// 全选
			allChoose() {
				this.isAllChecked = !this.isAllChecked;
				this.cartData.forEach(item => item.attrStatus = this.isAllChecked);
				if (this.isAllChecked) {
					this.billing = this.cartData.every(item => item.attrStatus === true);
				} else {
					this.billing = this.cartData.some(item => item.attrStatus === true);
				}
			},
			// 结算
			handleSettleMent() {
				let arr = [];
				this.cartData.forEach(item => {
					if (item.attrStatus) {
						arr.push(item.id);
					}
				});
				uni.setStorageSync("new", 0);
				this.cartId = arr.toString();
				uni.navigateTo({
					url: `/pages/order/confirmOrder?cartId=${this.cartId}`,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {

		.cart-box {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #ffffff;
			margin-bottom: 30rpx;
			padding: 30rpx 0rpx;

			.goods-img {

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.right-content {

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 17rpx;

					.title {
						width: 330rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 26rpx;
						color: #555555;
						margin-right: 35rpx;
					}
				}

				.specs {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 30rpx;
				}

				.count {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.price {
						color: red;
						font-weight: bold;
						font-size: 26rpx;
					}
				}
			}
		}

		.settlement {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			width: 100%;
			height: 97rpx;
			// line-height: 97rpx;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;

			.left-content {
				width: 70%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 20rpx;

				.selectAll {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.u-checkbox-group {
						margin-right: 36rpx;
					}
				}

				.price {
					font-size: 28rpx;
					color: red;
					font-weight: bold;
				}
			}

			.right-content {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #ffffff;
				background-color: #e5e5e5;
			}

			.selected {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #ffffff;
				background-color: #c55a5c;
			}
		}
	}
</style>